<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day01/js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="box">box</div>
    <input type="text">
    <!-- ul>li*5{$} -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
    // $("#box").on("click",function(){
    //     console.log("box");
    //     $(this).css({
    //       backgroundColor:'red'
    //     })
    //     .mouseover(function(){
    //      console.log("box1");
    //         $(this).css({
    //             width:'200px',
    //             height:'200px', 
    //         })
    //    })
    //  });
    //  $("#box").mouseover(function(){
    //      console.log("box1");
    //         $(this).css({
    //             width:'200px',
    //             height:'200px', 
    //         })
    //  })

//bind(’事件类型‘，事件处理程序) on()方法向被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
    // $("#box").bind('click',function(){
    //     console.log('box2');
    // })
    $("#box").on('click',function(){
        console.log('box3');
    })   
   $("#box").on({
    click:function(){
        console.log('点击了');
                $(this).css({
          backgroundColor:'red'
        })
    },
    mouseover:function(){
        console.log('鼠标经过了');
                    $(this).css({
                width:'200px',
                height:'200px', 
            })
    },
   })
</script>
<script>
    // 事件对象
    $('input').on('keyup',function(event){
        console.log(event)
        event.stopPropagation()//阻止冒泡
        event.preventDefault()//阻止默认行为
})

//each（）方法用于遍历匹配的元素集合，为每个匹配的元素执行指定的函数。
$('ul li').each(function(index,element){
    console.log(index)
    console.log(element)
    $(element).css({
        backgroundColor:'red',
        color:'#fff' 
    })
})

//jQuery.each()方法用于遍历数组或对象的每个元素，并为每个元素执行指定的函数。$.each()方法与jQuery.each()方法的作用相同，只是语法不同。
var arr = [1,2,3,4,5]
//forEach()  map()  filter()  reduce()  some()  every() 
arr.forEach(function(element,index){
    console.log(index)
    console.log(element)
})
$.each(arr,function(index,element){
    console.log(index)
    console.log(element)
})
var obj = {name:'zs',age:18,sex:'男'}
$.each(obj,function(key,value){
    console.log(key)
    console.log(value)
})
</script>
</html>